<!doctype html>
<html ng-app="myApp">
<head>
	<script src="js/angular-1.2.13.js"></script>
	<script src="js/angular-route-1.2.13.js"></script>
	<script src="js/controller.js"></script>
	<!-- <link rel="stylesheet" type="text/css" href="css/foundation.css">-->


	<base href="http://172.18.190.144/phpwechat/testng.html#"></base>
</head>
<body>
<div>{{globalclock | lowercase | capitalize}}</div>
<div ng-controller="HelloController">
	<h1>Hello {{ clock }}!</h1>
	<!-- 注意，服务的使用 -->
	<button ng-click="sayHello()">Hello</button>
	<button ng-click="sayAnotherHello()">AnotherHello</button><br/>
	<label>{{counter}}</label>
	<input type = 'button' ng-click="add(1)" value="add"/><br/>
	<labe>someBareValue from Parent: {{someBareValue}}</labe><br/>
	<labe>someModel.someValue from Parent: {{someModel.someValue}}</labe>	<br/>
	<input type="button" ng-click="changeParentValue()" value="changeParentValue"/><br/>
	<a ng-click = "subtract(2)" >subtract</a>
	<div ng-controller="childController">
		<label>{{child.text}} {{counter}}</label><br/>
		<labe>someBareValue from child: {{someBareValue}}</labe><br/>
		<labe>someModel.someValue from child: {{someModel.someValue}}</labe><br/>
		<input type="button" ng-click="changeChildValue()" value="changeChildValue"/><br/>
		<input type="button" ng-click = "add(20)" value="add 100 from child controller">
		<div ng-bind-template = "{{child.text}} {{counter}}"></div>

		<!-- 注意，ng-select的使用，还有获取对象数组中的属性的方法 -->
		<select ng-model="city" ng-options="city.name for city in cities">
			<option value ="">Choose City</option>
		</select>
		Best City: {{city.name}}


	</div>
</div>
<div ng-controller="anotherController">
	<h1>another controller {{clock}}</h1>
	<!-- 注意，ng-disabled的使用 -->
	<textarea ng-disabled="isDisabled" placeholder="input sth here..."></textarea>

	<label>someProperty = {{someProperty}}</label>
	<!-- 注意，ng-checked的使用，同时结合ng-model -->
	<input type="checkbox"
	ng-checked="someProperty"
	ng-init="someProperty = false"
	ng-model="someProperty">

	<!-- 注意，ng-href和ng-src的使用; 此处，其表达式可以为对象，且需要使用{{}}包围，而像ng-if之类的就不用，不知怎么区分……待看 
	另外，应使用ng-href和ng-src，而不是src和href，这是因为“浏览器会优先使用并行的方式来加载图片和其他内容，所以Angular没有机会拦截到数据绑定请求”，见《用AngularJS开发下一代Web应用》P27
	-->
	<a ng-href="{{myHref}}" >Link with ng-href</a>
	<img ng-src = '{{myImg}}' width="20" height = "20" />

	<!-- 注意，此处ng-if的表达式为对象时，不需要使用{{}}包围，而ng-href之类的需要…… -->
	<div ng-if="trueOrFalse" >Won't see this DOM node, not even in the source code</div>
	<div ng-if="2 + 2 === 4">
		Hi, I do exist
	</div>

	<!-- 注意，ng-submit的使用，《angularJS权威教程》P70；该“指令同时会阻止默认行为（发送请求并重新加载页面）” ； form的用法-->
	<form ng-submit="submit()">
		Enter text and hit enter:
		<input type="text" ng-model="person.name" name="person.name" />
		<input type="submit" name="person.name"	value="Submit" />
		<code>people={{people}}</code>
		<!-- 注意，此处()的用法 -->
		<ul ng-repeat="(index, object) in people">
		<li>{{ object.name }}</li>
		</ul>
	</form>
</div>

<!-- 注意，自定义指令的使用，.directive()；绑定策略 “@ = &” 的使用； -->
<input type ="text" ng-model="tto" />
<my-directive my-url="some text here or outside object like:  {{globalclock}}" ng-model="tto"  ee-tf-rf="globalclock" > </my-directive> <br/>

<div my-directive haha="{{globalclock}}"></div>


<div sidebox title="Links">
	<ul>
		<li>First link</li>
		<li>Second link</li>
	</ul>
</div>
<div sidebox title="TagCloud">
	<div class="tagcloud">
		<a href="">Graphics</a>
		<a href="">AngularJS</a>
		<a href="">D3</a>
		<a href="">Front-end</a>
		<a href="">Startup</a>
	</div>
</div>
<br>
<a href="testng.html#/edit">edit</a>
<a href="testng.html#/main">main</a>
<div class="content"> here is the ng-view
	<div ng-view></div>
</div>

<div ng-controller="sameController">
	sameController 1st
</div>

<div ng-controller="sameController">
	sameController 2nd
</div>

</body>
</html>